
<template>
  <search-table
    :data="urlList"
    :columns="urlCol"
    :page.sync="queryParams.pageIndex"
    :size.sync="queryParams.pageSize"
    :total="urlTotal"
    :loading="urlListLoading"
    @queryFun="getList">
    <template slot="search">
      <Button type="primary" ghost class="md-add-jh" @click="showModal(null)">创建Url</Button>
      <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshUrlList()">
        <i class="el-icon-refresh-right" />
      </Button>
    </template>
    <!--创建镜像"-->

    <Modal v-model="modalData.show" :mask-closable="false" width="680"
           :title="`${ isAdd ? '创建访问地址' : '修改访问地址'}`"
           @on-visible-change="changeVisible"
    >
      <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="120" style="width: 500px">
        <template v-if="upgradeType === 'add'">
          <FormItem prop="url" label="URL地址" key="url">
            <Input clearable v-model="formInline.url"></Input>
          </FormItem>
          <FormItem prop="ip" label="外网IP地址" key="ip">
            <Input clearable v-model="formInline.ip"></Input>
          </FormItem>
          <FormItem prop="port"  label="端口" key="port">
            <Input v-model="formInline.port"></Input>
          </FormItem>
        </template>
      </Form>
      <div slot="footer" class="footer">
        <Button @click="modalData.show = false">取消</Button>
        <Button @click="saveSystem" :loading="modalData.loading" type="primary">确定</Button>
      </div>
    </Modal>
  </search-table>
</template>

<script>
import {
  querySystemListUrl,
  addSystemsUrl,
  updateSystemUrl,
  deleteSystemUrl,
} from '../api/system'

import { validateIp, validatePort, validateUrlShort1 } from '@/libs/reg'
export default {
  name: 'PartManage',

  components: {

  },
  props: {
    businessSystemId: {
      type: String,
      default: ''
    }
  },
  computed: {
  },
  data() {
    return {
      queryParams:{
        pageIndex:1,
        pageSize:10
      },
      urlList:[],
      urlListLoading:false,
      urlTotal:0,
      upgradeType: 'add',
      isUpgrade: false,
      detailModalData: {
        show: false
      },
      detailInfo: {},
      urlCol: [
        {
          title:'对外URL',
          key:'url',
        },
        {
          title:'外网IP',
          key:'ip'
        },
        {
          title:'端口',
          key:'port',
        },
        {
          title: '操作',
          slot: 'action',
          width: 230,
          opList: [
            {
              txt: '修改',
              on:{
                click:(data,e) => {
                  this.showModal(data)
                }
              },
            },
            {
              txt: '删除',
              tooltip: true,
              type: 'delete',
              title: '确定要删除这个部件吗？',
              on:{
                click:(data,e) => {
                  this.deleteItem(data.id)
                }
              },
            }
          ]
        }
      ],
      modalData: {
        show: false,
        loading: false
      },
      currentBusinessSystemId:'',
      institutionList:[],
      industryList:[],
      netMeshList:[],
      netInfoList:[],
      formInline: {
        name: '',
        businessSystemId: this.businessSystemId,
        ip:'',
        port:'',
        url:'',
      },
      ruleInline: {
        ip: [
          { required: true, message: '外网IP地址不能为空', trigger: 'blur,change' },
          { validator: validateIp, trigger: 'blur,change' }
        ],
        port: [
          { required: true,  message: '端口不能为空', trigger: 'blur,change' },
          { validator: validatePort, trigger: 'blur,change' }
        ],
        url: [
          { required: true,  message: 'URL地址不能为空', trigger: 'change' },
          { validator: validateUrlShort1, trigger: 'blur,change' }
        ],
      },
      isAdd: false,
    }
  },
  methods: {
    getList(){
      this.queryList(this.currentBusinessSystemId)
    },
    refreshUrlList(){
      this.queryList(this.currentBusinessSystemId)
    },
    // 删除部件
    deleteItem(id) {
      deleteSystemUrl(id).then(({ code, message }) => {
        if (code !== 1) {
          this.$Message.warning(message)
          return
        }
        this.$Message.success(`删除成功`)
        // 删除后展示当前页，当前页没有数据展示前一页
        this.queryParams.pageIndex = (this.urlList.length == 1 && this.queryParams.pageIndex > 1) ?
          this.queryParams.pageIndex - 1 : this.queryParams.pageIndex;
        this.getList();
      }).catch(() => {
        this.$Message.error(`删除异常`)
      })
    },
    // 隐藏模态框时，重置表单数据
    changeVisible(type) {
      if (!type) {
        this.$refs.formInline.resetFields()
        this.upgradeType = 'add'
        this.modalData.loading = false
      }
    },

    // 打开模态框
    showModal(data, isUpgrade) {
      this.isAdd = !data
      this.modalData.show = true
      let obj = data || {}
      if(obj.port!==undefined||obj.port!=null){
        obj.port+='';
      }
      this.formInline = Object.assign({ businessSystemId: this.currentBusinessSystemId }, obj);
    },
    queryList(businessSystemId){
      this.urlListLoading = true;
      this.currentBusinessSystemId = businessSystemId;
      let passParams = {
        businessSystemId: businessSystemId
      }
      querySystemListUrl(passParams).then(res=>{
        if(res.code===1){
          this.urlList = res.data.items;
          this.urlTotal = res.data.total;
        }else{
          this.$Message.error(res.message);
        }
      }).finally(()=>{
        this.urlListLoading = false;
      })
    },
    // 保存数据
    saveSystem() {
      this.$refs.formInline.validate(valid => {
        if (valid) {
          this.modalData.loading = true
          let apiName = this.isAdd ? addSystemsUrl : updateSystemUrl
          if (this.isAdd) { // 创建操作确认把id删掉，避免造成错误
            delete this.formInline.id
          }
          apiName(this.formInline).then(({ code, message }) => {
            if (code !== 1) {
              this.$Message.warning(message)
              return
            }
            // 创建成功
            this.$Message.success(`${this.isUpgrade ? '升级' : this.isAdd ? '创建' : '修改'}Url成功`)
            this.getList();
            this.modalData.show = false
          }).catch(() => {
            this.$Message.error(`${this.isUpgrade ? '升级' : this.isAdd ? '创建' : '修改'}Url异常`)
          }).finally(() => {
            this.modalData.loading = false
          })
        }
      })
    },
  }
}
</script>

